<template>
  <my-loading :style="{
      display: loading ? 'block' : 'none',
    }"></my-loading>
  <div class="screen-layout" :style="{ visibility: loading ? 'hidden' : 'visible' }">
    <div class="scene">
      <div
          v-for="com in comps"
          :key="com.id"
          :style="{
          left: com.attr.x + 'px',
          top: com.attr.y + 'px',
          width: com.attr.w + 'px',
          height: com.attr.h + 'px',
          opacity: com.attr.opacity,
          transform: `rotate(${com.attr.deg}deg) ${com.attr.filpH ? 'scaleX(-1)' : ''} ${com.attr.filpV ? 'scaleY(-1)' : ''}`,
        }"
          class="scene_absolute">
        <component :is="com.name" :com="com"/>
      </div>
    </div>
  </div>
</template>

<script>
import { computed, defineComponent, onMounted, ref } from "vue";
import { useStore } from "vuex";
import { useRoute, useRouter } from "vue-router";
import { inserted, setStyle } from "./../../utils/resize";

export default defineComponent({
  name: "screen",
  setup() {
    const store = useStore();
    const route = useRoute();
    const router = useRouter();
    const pageConfig = computed(() => store.state.design.pageConfig);
    const comps = computed(() => store.state.design.components);
    const pageInfo = computed(() => store.state.design.pageInfo);
    const loading = ref(true);
    const getPageCompsInfo = () => {
      let page_url = route.params.screenId;
      if (page_url) {
        store.dispatch("design/loadScreen", page_url).then((res) => {
          loading.value = false;
        }).catch(() => {
          router.replace("404");
        });
      } else {
        router.replace("404");
      }
    };
    const resizeAuto = (width, height) => {
      const cw = document.documentElement.clientWidth;
      const ch = document.documentElement.clientHeight;
      const ratioX = cw / width;
      const ratioY = ch / height;
      setStyle(document.body, {
        transform: `scale(${ratioX}, ${ratioY})`,
        transformOrigin: "left top",
        backgroundSize: "100% 100%",
      });
    };

    const resizeWidth = (width) => {
      const ratio = document.documentElement.clientWidth / width;
      setStyle(document.body, {
        transform: `scale(${ratio})`,
        transformOrigin: "left top",
        backgroundSize: "100%",
      });
    };

    const resizeHeight = (width, height) => {
      const cw = document.documentElement.clientWidth;
      const ch = document.documentElement.clientHeight;
      const ratio = ch / height;
      const gap = (cw - width * ratio) / 2;
      setStyle(document.body, {
        transform: `scale(${ratio})`,
        transformOrigin: "left top",
        backgroundSize: `${(width / cw * ratio) * 100}% 100%`,
        backgroundPosition: `${gap.toFixed(3)}px top`,
        marginLeft: `${gap.toFixed(3)}px`,
      });
    };

    const resizeFull = (width, height) => {
      const cw = document.documentElement.clientWidth;
      const ch = document.documentElement.clientHeight;
      const ratio = ch / height;
      const gap = (cw - width * ratio) / 2;
      setStyle(document.body, {
        transform: `scale(${ratio})`,
        transformOrigin: "left top",
        backgroundSize: `${(width / cw * ratio) * 100}% 100%`,
        backgroundPosition: `${gap.toFixed(3)}px top`,
      });
      document.documentElement.style.overflowX = "scroll";
    };

    const resizeNone = () => {
      setStyle(document.body, {
        overflow: "hidden",
        position: "relative",
      });
    };

    const resize = (config) => {
      switch (config.zoomMode) {
        case "auto":
          resizeAuto(config.width, config.height);
          break;
        case "width":
          resizeWidth(config.width);
          break;
        case "height":
          resizeHeight(config.width, config.height);
          break;
        case "full":
          resizeFull(config.width, config.height);
          break;
        default:
          resizeNone();
          break;
      }
    };
    const initPageInfo = (config) => {
      document.title = pageInfo.value.name
      document.querySelector("meta[name=\"viewport\"]")
          .setAttribute("content", `width=${config.width}`);

      setStyle(document.documentElement, {
        overflowX: "hidden",
        overflowY: "visible",
      });

      setStyle(document.body, {
        width: `${config.width}px`,
        height: `${config.height}px`,
        backgroundImage: `url(${pageConfig.value.bgimage})`,
        backgroundColor: pageConfig.value.bgcolor,
      });
      resize(config);
    };
    onMounted(() => {
      getPageCompsInfo();
      initPageInfo(pageConfig.value);
      inserted(window, "resize", () => {
        resize(pageConfig.value);
      });
    });
    return {
      comps,
      pageConfig,
      pageInfo,
      loading,
      getPageCompsInfo,
      initPageInfo,
      resizeAuto,
      resizeWidth,
      resizeHeight,
      resizeFull,
      resizeNone,
      resize,
    };
  }
});
</script>

<style lang="less" scoped>
.screen-layout {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  visibility: hidden;

  .scene_absolute {
    position: absolute !important;
    margin: 0 !important;
  }
}

</style>